<template>
  <!-- 左右环绕 card -->
  <div class="farmland">
    <div class="farmland-item" v-for="(item, index) in dataset" :key="index">
      <div class="item-value colorYellow">
        {{ item.value }}
        <span v-if="isCounty">{{ unitCounty[item.name] || "亩" }}</span>
        <span v-else>{{ unit[item.name] || "万亩" }}</span>
      </div>
      <img height="29" width="96" src="../../assets/imgs/sy.png" alt="" />
      <div class="item-name">{{ item.name }}</div>
      <img height="3" width="116" src="../../assets/imgs/line.png" alt="" />
    </div>
  </div>
</template>

<script>
const unit = {
  理赔面积: "万亩",
  理赔次数: "万次",
  理赔总金额: "亿元",
  贴息总金额: "亿元",
  粮食总产量: "万吨",
  已发放总金额: "万元",
  农技人员: "人",
  服务组织: "个",
  农机总动力: "万千瓦",
  农资经营店: "家",
};
const unitCounty = {
  理赔面积: "亩",
  理赔次数: "万次",
  理赔总金额: "亿元",
  贴息总金额: "亿元",
  粮食总产量: "吨",
  已发放总金额: "万元",
  农技人员: "人",
  服务组织: "个",
  农机总动力: "万千瓦",
  农资经营店: "家",
};

export default {
  data() {
    return {
      unit,
      unitCounty,
    };
  },
  computed: {
    isCounty() {
      return JSON.parse(this.$store.getters.areaIds).length === 3 ? true : false;
    },
  },
  props: {
    dataset: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style lang="less" scoped>
.farmland {
  display: flex;
  flex-wrap: wrap;
  .farmland-item {
    width: 44%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px;
    margin: 10px;
    .item-name {
      margin: 10px 0;
    }
  }
}
</style>
